<script setup name="ChargingItemForm">
import { ref,onMounted } from "vue";
import {selectData1,saveData1,dataSourceTableConst,
        insertFun,tableRef,updateFun,cellClick,
        cellClickConst,deleteFun} 
from "@/utils/InsertDeleteSelectUpdate";


const select1=()=>{
    selectData1('100150',{"vlb":buttonVlbConst.value},"zyhttphosptalserver");
}
const insert1=()=>{

  const insertObj={
  dybl:"1",
  dybl1:"77",
  dydw:"77",
  dydw1:"77",
  dyz:"123",
  hisbm:"人",
  hisdw:"77",
  hismc:"77",
  jm:"",
  lb:"1",
  saveflag: 1 
};
  insertObj.lb=buttonVlbConst.value;
  insertFun(insertObj,'jm');
}
const update1=(row ,i)=>{
    updateFun(row,i)
}
const save1=()=>{
    saveData1('100151','zyhttphosptalserver');
    select1();
}
const delete1=()=>{
    deleteFun();
}




//根据点击的菜单列表获取对应的数据源信息，以下是类别信息和获取方法
const buttonVlbConst=ref('1');
//定义左侧列表样式切换的方法就是改选中颜色和字体颜色的方法和变量
const buttonConst=ref('呼吸机');
const buttonConstListCss=ref([
  {a:"#359DE1",b:"#FFFFFF"} ,
  {a:"#fff",b:"#333333"} ,
  {a:"#fff",b:"#333333"} 

]);
const buttonConstFun=(buttonValue)=>{
    buttonConst.value=buttonValue;
    if(buttonValue=='呼吸机'){
        buttonVlbConst.value='1';
        select1();
        buttonConstListCss.value[0].a="#359DE1"; 
        buttonConstListCss.value[0].b="#FFFFFF";
        buttonConstListCss.value[1].a="#fff"; 
        buttonConstListCss.value[1].b="#333333";
        buttonConstListCss.value[2].a="#fff"; 
        buttonConstListCss.value[2].b="#333333";
    }
    else  if(buttonValue=='护理级别'){
        buttonVlbConst.value='2';
        select1();
        buttonConstListCss.value[1].a="#359DE1"; 
        buttonConstListCss.value[1].b="#FFFFFF";
        buttonConstListCss.value[0].a="#fff"; 
        buttonConstListCss.value[0].b="#333333";
        buttonConstListCss.value[2].a="#fff"; 
        buttonConstListCss.value[2].b="#333333";
    }
    else  if(buttonValue=='输血'){
        buttonVlbConst.value='3';
        select1();
        buttonConstListCss.value[2].a="#359DE1"; 
        buttonConstListCss.value[2].b="#FFFFFF";
        buttonConstListCss.value[0].a="#fff"; 
        buttonConstListCss.value[0].b="#333333";
        buttonConstListCss.value[1].a="#fff"; 
        buttonConstListCss.value[1].b="#333333";
    }
}

//2.0把标识列的数字转码成删除、修改、新增等文字
const biaoshi = (cellValue ) => {
    if(cellValue=='2')
    {
     return   '待改'
    }
    else if(cellValue=='1')
    {
     return  '待增'
    }
    else if(cellValue=='3')
    {
     return  '待删'
    }
    else if(cellValue=='9')
    {
     return  '待删'
    }
    else
    {
     return ''
    }  
}










onMounted(()=>{
    select1();
});
</script>

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="main-content-left">
            <div class="main-content-left-button xpFont" :style="{background:buttonConstListCss[0].a,color:buttonConstListCss[0].b}" @click="buttonConstFun('呼吸机')">呼吸机</div>
            <div class="main-content-left-button xpFont" :style="{background:buttonConstListCss[1].a,color:buttonConstListCss[1].b}" @click="buttonConstFun('护理级别')"> 护理级别</div>
            <div class="main-content-left-button xpFont" :style="{background:buttonConstListCss[2].a,color:buttonConstListCss[2].b}" @click="buttonConstFun('输血')">输血</div>
        </div>  

        <div  class="main-content-right">
             
            <div v-if="buttonConst=='呼吸机'" class="main-content-right-shuoming">
                呼吸机设置说明:<br/>
                1简码处输入拼音简码，从his费用明细中提取诊疗项目,自动生成his编码、名称、单位；  <br/> 
                2.1对应类别单位默认为分钟;<br/> 
                2.2如果医院计费项目单位是按天，则转换比例设置为3600；<br/> 
                2.3如果是小时，则转换比例为60；<br/> 
                2.4如果是分钟，则转换比例为1；<br/> 

            </div>
            <div v-if="buttonConst=='护理级别'" class="main-content-right-shuoming">
                护理天数设置说明:<br/> 
                1简码处输入拼音简码，从his费用明细中提取护理诊疗项目,自动生成his编码、名称、单位；  <br/> 
                2.1一到三级护理，his为日或天的，默认his单位为日 。对应类别编码分别为1,2,3;对应单位天；转换比例默认为；<br/> 
                2.2特级护理默认的对应单位是天，如果医院做的单位是天或日，转换比例就要为1；<br/> 
                2.3特级护理默认的对应单位是小时，如果医院做的单位是天或日，转换比例就要为60；<br/> 

            </div>
            <div v-if="buttonConst=='输血'" class="main-content-right-shuoming">
                输血信息设置说明:<br/>
                1.简码处输入拼音简码，从his费用明细中提取输血诊疗项目,自动生成his编码、名称、单位；  <br/>
                2.1、红细胞默认对应单位为U;<br/>
                红细胞默认对应单位为U; 
                全血默认对应单位为ML; 
                血小板默认31手工分离浓缩血小板 对应单位为 U ,其他默认为治疗量; 
                血浆默认对应单位为ML; 
                冷沉淀默认对应单位为U;<br/>
                机采浓缩白细胞悬液 默认对应单位为ML;<br/>
                2.2C、转换比例为医院的his单位与对应类别单位的比例。当31手工分离浓缩血小板时，还需要填写单位U和单位治疗量的转换比例，方便病案首页提取；<br/>

            </div>
           
            <div class="main-content-right-button">
            <div class="button-case">
            <div class="button-case-box " @click="insert1()">
            <img
              src="../../../assets/images/add_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>新增</div>
            </div>

            <div class="button-case-box " @click="delete1()" >
                <img
                src="../../../assets/images/del_icon.png"
                style="width: 16px; height: 16px; margin-right: 2px"
                alt=""
                srcset=""
                />
                <div> {{cellClickConst}}</div>  
            </div>
            <div class="button-case-box"  > 
                <img
                    src="../../../assets/images/save_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                <el-popconfirm title="确认保存吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="save1()"
                @cancel=""
                >
                <template #reference>
                    <div>保存</div>
                </template>
                </el-popconfirm>   
            </div>   
            <div class="button-case-box " @click="select1()">
            <img
              src="../../../assets/images/replace_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>刷新</div>
            </div>
        </div> 
            </div>
            <div class="main-content-right-table"> 
                <div class="table-case">
                    <vxe-table
                    ref="tableRef"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConst"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => update1(row,1)"   
                    @edit-closed="(row) => update1(row,2)"   
                    @cell-click="(row) => update1(row,3)"   
                >
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field="saveflag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
              </template>
            </vxe-column>
            <vxe-column  title='选择'   width=100 >
            </vxe-column>
             <vxe-column field='jm'     title='简码'      width=100   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='hisbm'   title='his编码'      width=80   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='hismc'   title='his名称'      width=200   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='hisdw'   title='his单位'      width=100   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='dybl'     title='转换比例'      width=80   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dyz'     title='对应类别'      width=100   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='lb'     title='对应类别单位'      width=120   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dybl1'     title='手工分离浓缩血小板比例'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='手工分离浓缩血小板单位'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>



            </vxe-table> 
            </div>  
            </div>


        </div>
        
    </div>
</div>


</template>

<style lang="scss" scoped>
 
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#ffffff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    .main-content-left{
        width: 192px;
        height: 100%;
        
        .main-content-left-button{
            height: 36px;
            width: 100% ;
            padding: 8px;
            border-radius: 4px 4px 4px 4px;
            cursor: pointer; /* 这里设置为pointer，即手指形状 */
        }
    }
    .main-content-right{
        width: calc(100% - 193px);
        border-left: 1px solid  #EBEBEB;
        padding: 0px 0px 12px 12px;
          
       
        .main-content-right-shuoming{
            height: 146px;
            width: 100%;
            background: #F7F7F7;
            margin-bottom: 16px;

            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
         
        .main-content-right-button{
            height: 40px;
            width: 100%;
            border-radius: 4px 4px 0px 0px;
            border: 1px solid #EBEBEB;
            
            .button-case{
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #333333;
                height: 100%;
                margin-left: 12px;
                .button-case-box {
                    display: flex;
                    align-items: center;
                    margin-right: 12px;
                    cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
                   
                     
                }
            }
        }
        .main-content-right-table{
            height: calc(100% - 179px);
            width: 100%;
            background-color: blueviolet;
            .table-case{
                width: 100%;
                height: 100%;
            }
        }

    }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontText-align{
  text-align: left;
}
.xpFontColor{
    color: #333333;
}
</style>